<script context="module">
	/**
	 * @type {import('@sveltejs/kit').Load}
	 */
	export async function load({ page, fetch, session, context }) {
		return fetch(`blog.json`) // index.json.js = blog.json或blog/blog.json
			.then((r) => r.json())
			.then((posts) => {
				console.log('博客列表', posts);
				return {
					props: {
						wendaList: posts,
						blogList: posts
					}
				};
			});
	}
</script>

<script lang="ts">
	let wendaTag;
	let total = 10;
	let moduleList = ['最新', '高中', '初中', '小学', '综合'];
	let wendaModule = '最新';
	export let wendaList: any[];
	export let blogList: any[];
</script>

<svelte:head>
	<title>最新动态</title>
</svelte:head>
<main id="wendaList">
	<div class="layout">
		<div class="left-part">
			<div class="section wenda">
				<h3 class="section-title">最新</h3>
				<div class="content">
					{#if !wendaTag}
						<div class="tag-wrapper">
							{#each moduleList as moduleItem}
								{#if wendaModule == moduleItem}
									<div class="tag active">{moduleItem}</div>
								{:else}
									<div class="tag">{moduleItem}</div>
								{/if}
							{/each}
						</div>
					{/if}
					<div class="question-wrapper">
						{#each wendaList as wendaItem}
							<a class="question-item" href="blog/{wendaItem.slug}" target="_blank">
								<div class="title-line">
									<i class="question-icon" />
									<span class="question-title hot">{wendaItem.title}</span>
									{#if wendaItem.popular}
										<i class="hot-icon" />
									{/if}
									<span class="view-count">阅读量：{wendaItem.viewCount}</span>
								</div>
								<p class="distribute-time">发布时间：{wendaItem.publishTime}</p>
								<div class="answer">
									<i class="answer-icon" />
									<p class="answer-content">{@html wendaItem.html}</p>
								</div>
							</a>
						{/each}
					</div>
					<div class="pagination" />
				</div>
			</div>
		</div>

		<div class="right-part">
			<div class="section relative-question">
				<h3 class="section-title">相关问题</h3>
				<ul class="content">
					{#each blogList as wendaItem}
						<li class="question">
							<a
								class="ask"
								href="blog/{wendaItem.slug}"
								target="_blank"
								title={wendaItem.title}>{wendaItem.title}</a
							>
							<p class="info">
								<span class="tag">{wendaItem.module}</span>
								<span class="time">{wendaItem.publishTime}</span>
							</p>
						</li>
					{/each}
				</ul>
			</div>
		</div>
	</div>
</main>

<style lang="less">
	@import "../app";
	#wendaList {
		.layout {
			margin: 0 auto;
			margin-bottom: 60px;
			width: 1100px;
			.left-part {
				float: left;
				width: 49%;
			}

			.right-part {
				float: right;
				width: 49%;
			}

			.section {
				border-radius: 3px;
				background-color: #fff;
				box-shadow: 0px 0px 14px 1px rgba(200, 200, 200, 0.21);

				.section-title {
					position: relative;
					margin-left: 14px;
					height: 23px;
					line-height: 23px;
					font-size: 24px;
					color: #262626;

					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: -14px;
						width: 4px;
						height: 23px;
						display: block;
						background: #e90c2f;
					}
				}
			}

			.wenda {
				padding: 38px 30px;
				min-height: 888px;
				box-sizing: border-box;

				.section-title {
					position: relative;
					.about-amount {
						position: absolute;
						right: 0;
						bottom: 0;
						font-size: 14px;
						color: #999;
					}
				}

				.tag-wrapper {
					margin-top: 27px;
					margin-left: 14px;
					font-size: 0;

					.tag {
						margin-right: 12px;
						width: 65px;
						height: 30px;
						display: inline-block;
						border-radius: 5px;
						background-color: #b6b6b6;
						line-height: 30px;
						text-align: center;
						font-size: 18px;
						color: #fff;
						cursor: pointer;

						&.active {
							background-color: @zm-red;
						}
					}
				}

				.question-wrapper {
					.question-item {
						position: relative;
						padding: 24px 14px 20px;
						border-bottom: 1px solid rgba(227, 227, 227, 0.9);
						display: block;
						text-decoration: none;
						cursor: pointer;

						&:last-child {
							border-bottom: none;
						}

						.title-line {
							position: relative;
							line-height: 27px;
							font-size: 0;

							.question-icon {
								position: absolute;
								top: 4px;
								left: 0;
								width: 18px;
								height: 18px;
								display: block;
								background: url('')
									no-repeat center;
								background-size: cover;
							}

							.question-title {
								margin-left: 26px;
								max-width: 448px;
								display: inline-block;
								vertical-align: middle;
								font-size: 18px;
								color: #262626;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.hot-icon {
								display: inline-block;
								margin-left: 5px;
								vertical-align: middle;
								width: 24px;
								height: 26px;
								background: url('https://web-data.zmlearn.com/image/5nnHg4Q4eR9W8EASFpnwVW/hot.png')
									no-repeat center;
								background-size: cover;
							}

							.view-count {
								position: absolute;
								top: 0;
								right: 0;
								font-size: 14px;
								color: #999;
							}
						}

						.distribute-time {
							margin-top: 10px;
							margin-left: 26px;
							font-size: 14px;
							color: #999;
						}

						.answer {
							position: relative;
							margin-top: 15px;
							font-size: 0;

							.answer-icon {
								position: absolute;
								top: 4px;
								left: 0;
								width: 18px;
								height: 18px;
								display: block;
								background: url('')
									no-repeat center;
								background-size: cover;
							}

							.answer-content {
								margin-left: 26px;
								max-height: 48px;
								font-size: 16px;
								color: #999;
								overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								-moz-box-orient: vertical;
								box-orient: vertical;
								text-overflow: ellipsis;
								overflow: hidden;
							}
						}
					}
				}

				.pagination {
					margin-top: 20px;
					text-align: center;
					user-select: none;

					.operation {
						margin-right: 10px;
						padding: 0 5px;
						height: 22px;
						display: inline-block;
						vertical-align: middle;
						border: 1px solid #b6b6b6;
						font-size: 14px;
						color: #999;
						line-height: 22px;
						cursor: pointer;

						&.current {
							border: 1px solid #e90c2f;
							background-color: #e90c2f;
							color: #fff;
						}
					}
				}
			}
			.relative-question {
				padding: 38px 35px;
				box-sizing: border-box;

				.content {
					padding-left: 14px;
					list-style-type: disc;

					.question {
						padding: 18px 0;
						border-bottom: 1px solid #e3e3e3;

						&:last-child {
							padding-bottom: 0;
							border-bottom: none;
						}

						.ask {
							display: block;
							text-decoration: none;
							font-size: 18px;
							color: #262626;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.info {
							position: relative;
							margin-top: 10px;
						}

						.tag {
							padding: 0 5px;
							height: 22px;
							border-radius: 3px;
							background-color: #ff8e33;
							display: inline-block;
							font-size: 16px;
							color: #fff;
						}

						.time {
							position: absolute;
							right: 0;
							bottom: 0;
							font-size: 14px;
							color: #999;
						}
					}
				}
			}
		}
	}
</style>
